<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>慈善平台-以公益的方式，为世界带来更多平等的机会</title>
    <link rel="stylesheet"  th:href="@{/layui/css/layui.css}" />
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
    <link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">

</head>

<body>
<!--<div class="logo">-->
<!--    <img th:src="@{/images/background/blue.png}">-->
<!--</div>-->

<div class="main" style="height: 400px">
    <div class="title" style="text-align: center">
        <span style="color:rgb(255,103,0); font-weight: bolder;font-size: 21px" >慈善公益平台</span>
    </div>

    <div class="title-msg">
        <span style="color: rgb(84,84,84); font-weight: bold; font-size: 15px" >请输入登录账户和密码</span>

        <label style="font-size:15px; color:red; margin-left:40px;
        font-weight:bold; font-size:15px" th:text="${session.error}">
        </label>

    </div>

    <form th:action="@{/user/login}" class="login-form" method="post" novalidate onsubmit="return checkInformation()" >
        <!--输入框-->
        <div class="input-content">
            <!--   用户名     -->
            <div>
                <input type="text" autocomplete="off"
                       placeholder="用户名" name="account" id="account"required/>
            </div>
            <!--密码-->
            <div style="margin-top: 16px">
                <input type="password"
                       autocomplete="off" placeholder="登录密码" name="password"  id="password" required maxlength="32"/>
            </div>
            <!-- 验证码  -->
            <div style="margin-top: 17px">
                <input type="text"
                       autocomplete="off" placeholder="验证码" name="verify"  id="verify" required maxlength="32"/>
                <a href="javascript:void(0);" title="点击更换验证码">
                    <img id="imgVerify" src="login/getVerify" alt="更换验证码" height="36" width="170" onclick="getVerify(this);">
                </a>
            </div>
        </div>

        <!--登入按钮-->
        <div style="text-align: center ;margin-top: 40px">
            <button type="submit" class="layui-btn layui-btn-danger layui-btn-fluid" style="width: 100%;padding-right: 10px;background-color: rgb(255,103,0)">
                登录
            </button>
        </div>
                <div class="foor">
<!--                    <div class="left"><span>忘记密码?</span></div>-->
                    <div class="right">
                        <a th:href="@{/user/toReg}">注册账户</a>
                    </div>
               </div>
    </form>
</div>

<script th:inline="javascript">
    var layer;
    layui.use("layer",function () {
        layer = layui.layer;
    });

    //如果数据校验通过返回true，不通过则返回false
    function checkInformation() {
        //1.校验类别名称,先获取类别名称
        var name =document.getElementById("account").value;
        if(name == ""){
            layer.msg("请输入用户名！");
            return false;
        }
        //2.校验类别描述
        var password = document.getElementById("password").value;
        if(password == ""){
            layer.msg("请输入密码！");
            return false;
        }
        //3.校验验证码
        var checking = document.getElementById("checking").value;
        if(checking == ""){
            layer.msg("请输入验证码！");
            return false;
        }
        return true;
    }
</script>
<!--引入JavaScript-->
<script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>
<!--<script type="text/javascript" th:src="@{/js/login.js}"></script>-->

</body>

</html>
